<template>
  <div class="profile">
    <!-- 导航条 -->
    <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料"></van-nav-bar>

    <!-- 编辑区 -->
    <van-cell-group>
      <input ref='photo' type="file" @change="changePhoto" hidden/>
      <van-cell is-link title="头像" @click="profilePhoto" center>
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="user.photo"
        />
      </van-cell>

      <van-cell is-link title="名称" :value="user.name" @click="showNameFn"/>
      <van-cell is-link title="性别"  @click="genderPop" :value="user.gender===1 ? '女':'男'"/>
      <van-cell is-link title="生日" @click="birthdayFn"  :value="user.birthday" />
    </van-cell-group>
    <!-- 修改名称弹框 -->
    <van-dialog @confirm='nameFn' v-model="showName" title="修改名字" show-cancel-button>
      <van-field v-model="NewName" placeholder="请输入用户名" />
    </van-dialog>
    <!-- 修改性别弹框 -->
    <van-popup v-model="showGender" position="bottom">
        <van-cell is-link >
            <van-nav-bar title="修改性别" left-text="取消" @click-left="showGender=false"/>
            <van-cell title="男" @click="genderFn(0)" is-link></van-cell>
            <van-cell title="女" @click="genderFn(1)" is-link></van-cell>
        </van-cell>
    </van-popup>
    <!-- 生日弹出层 -->
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel='showBirthday=false'
        @confirm='confirmFn'
      />
    </van-popup>
  </div>
</template>

<script>
import { reqGetProfile, reqUserSelf, reqUpdatePhoto } from '@/api/user'
import dayjs from 'dayjs'

export default {
  name: 'profile',
  data () {
    return {
      user: {},
      showName: false,
      showGender: false,
      showBirthday: false,
      NewName: '',
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    }
  },
  // ==== 用户个人信息页面 ====
  created () {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo () {
      const { data } = await reqGetProfile()
      this.user = data
    },
    async showNameFn () {
      this.showName = true
      this.NewName = this.user.name // 回显
    },
    async nameFn () {
      if (this.NewName.trim() === '') {
        this.$toast('输入不能为空')
        return
      }
      await reqUserSelf({
        name: this.NewName
      })
      this.user.name = this.NewName // 手动更新视图【或重新发送ajax，太麻烦，没必要】
    },
    async genderPop () {
      this.showGender = true
    },
    async genderFn (gender) {
      await reqUserSelf({ gender })
      this.user.gender = gender
      this.$toast('修改成功')
      this.showGender = false
    },
    async birthdayFn () {
      this.showBirthday = true
      // !日历对象的赋值，必须是日期对象
      this.currentDate = new Date(this.user.birthday) // 回显
    },
    // ===== 确定按钮 =====
    async confirmFn () {
      // ! 年月日格式
      await reqUserSelf(
        { birthday: dayjs(this.currentDate).format('YYYY-MM-DD') })
      const currentDate = dayjs(this.currentDate).format('YYYY-MM-DD')
      this.user.birthday = currentDate
      this.$toast('修改成功')
      this.showBirthday = false
    },
    // ===== 出现头像文件夹 =====
    profilePhoto () {
      this.$refs.photo.click()
    },
    // ===== 更换头像 =====
    async changePhoto (e) {
      this.$toast.loading({
        message: '上传中...',
        forbidClick: true, // 是否禁止背景点击
        duration: 0, // 展示时长(ms)，值为 0 时，toast 不会消失
        overlay: true // 遮罩层
      })
      console.log(e)
      const file = e.target.files[0]
      const formData = new FormData()
      // 依据接口文档要传参数photo
      formData.append('photo', file)
      const { data: { photo } } = await reqUpdatePhoto(formData)
      this.user.photo = photo // 回显
      this.$toast.success('上传成功')
    }
  }
}
</script>

<style lang='scss' scoped>
.profile{
  ::v-deep{
    .van-nav-bar__text{
    color: #fff;
  }
  }
}
</style>
